<script lang="ts" setup>
import resize from 'element-resize-detector'

type Type = 'offset' | 'client' | 'scroll'
const { type = 'offset' } = defineProps<{ type?: Type }>()
const el = useTemplateRef('el')
const detector = resize()
const size = reactive<{ width: number, height: number }>({ width: 0, height: 0 })

onMounted(() => {
  detector.listenTo(el.value!, () => {
    size.width = el.value![(type + 'Width') as `${Type}Width`]
    size.height = el.value![(type + 'Height') as `${Type}Height`]
  })
})
onUnmounted(() => detector.uninstall(el.value!))
</script>

<template>
  <div class="Resize" ref="el">
    <slot :width="size.width + 'px'" :height="size.height + 'px'" :w="size.width" :h="size.height" />
  </div>
</template>
